<template>
  <Row :style="{ height: setPageHei }" style="background-color: #f4f7ff">
    <Col span="18" class="middle-content-wrap" :style="{ height: middleContHei }">
      <!-- 工程排序 -->
      <Row>
        <Col span="8" style="padding-right: 14px">
          <Card style="width:100%;position: relative" class="project-wrap-card">
            <!-- 工程数量 -->
            <div style="font-weight: 700;font-size: 18px;margin-bottom: 10px;">
              工程数量:{{ this.proTotal }}
            </div>
            <div id="proStatistics" v-show="showDefImg2">
              <div class="project-status-wrap" v-for="(item, key) in proPerList" :key="key">
                <div class="project-text-wrap">
                  <!-- 进度环 -->
                  <i-circle
                    :size="60"
                    :percent="item.pre"
                    :stroke-width="11"
                    :trail-width="10"
                    :stroke-color="setOutLineColor(item.color)"
                    :trail-color="setInLineColor(item.color)"
                  >
                    <span class="demo-circle-inner" style="color: #1563C2 ;">{{ item.pre }}%</span>
                  </i-circle>
                  <!-- 部署状态 -->
                  <div class="project-text">
                    <div class="text-style" style="color: #1563C2 ;">{{ item.statusName }}</div>
                    <div class="text-style">{{ item.count }}</div>
                  </div>
                </div>
                <!-- 右侧百分比展示 -->
                <div class="text-style">{{ item.pre }}%</div>
              </div>
            </div>
            <!-- 没有数据展示的时候显示下边内容 -->
            <div style="height: 409px" v-show="!showDefImg2">
              <div class="preDefGraphWrap">
                <div class="defGraph"></div>
                <div class="graphText">暂无信息</div>
              </div>
            </div>
          </Card>
        </Col>
        <Col span="16">
          <Card class="pd">
            <div class="resource-wrap">
              <!-- 工程资源排行及导航 -->
              <div style="display: flex;justify-content: space-between;align-items: center;">
                <div style="font-size: 18px;font-weight: 700;color: #333333;">
                  工程资源使用排序TOP10
                </div>
                <div class="class-title-wrap">
                  <div v-show="Omit_the_figure">
                    <div class="preDefGraphWrap">
                      <div class="defGraph"></div>
                      <div class="graphText">暂无信息</div>
                    </div>
                  </div>
                  <div class="class-title" @click="clickResourceTitle('CPU')">
                    <div class="class-title-all" :class="{ active: cpuText }">CPU</div>
                    <div class="class-title-line" :class="{ 'line-active': cpuLine }"></div>
                  </div>
                  <div
                    style="margin-left: 20px"
                    class="class-title"
                    @click="clickResourceTitle('MEM')"
                  >
                    <div class="class-title-all" :class="{ active: memText }">MEM</div>
                    <div class="class-title-line" :class="{ 'line-active': memLine }"></div>
                  </div>
                  <div
                    style="margin-left: 20px"
                    class="class-title"
                    @click="clickResourceTitle('DISK')"
                  >
                    <div class="class-title-all" :class="{ active: diskText }">DISK</div>
                    <div class="class-title-line" :class="{ 'line-active': diskLine }"></div>
                  </div>
                  <div
                    style="margin-left: 20px"
                    class="class-title"
                    @click="clickResourceTitle('NW')"
                  >
                    <div class="class-title-all" :class="{ active: netText }">NETWORK</div>
                    <div class="class-title-line" :class="{ 'line-active': netLine }"></div>
                  </div>
                </div>
              </div>
              <div style="width: 100%;height: 369px;margin-top: 8px;" id="fourResource"></div>
            </div>
          </Card>
        </Col>
      </Row>

      <!-- 虚拟机数量排序 -->
      <div class="vms-wrap" style="margin-top: 16px;">
        <div style="display: flex;justify-content: space-between;align-items: center;">
          <div style="font-size: 18px;font-weight: 700;">工程中的虚拟机数量排序TOP10</div>
          <div class="class-title-wrap">
            <div v-show="Omit_the_figures">
              <div class="preDefGraphWrap">
                <div class="defGraph"></div>
                <div class="graphText">暂无信息</div>
              </div>
            </div>
            <div class="class-title" @click="clickVmsTitle('total')">
              <div class="class-title-all" :class="{ active: vmsTotalText }">总量</div>
              <div class="class-title-line" :class="{ 'line-active': vmsTotalLine }"></div>
            </div>
            <div style="margin-left: 20px" class="class-title" @click="clickVmsTitle('success')">
              <div class="class-title-all" :class="{ active: vmsNorText }">正常</div>
              <div class="class-title-line" :class="{ 'line-active': vmsNorLine }"></div>
            </div>
            <div style="margin-left: 20px" class="class-title" @click="clickVmsTitle('failure')">
              <div class="class-title-all" :class="{ active: vmsAbnorText }">异常</div>
              <div class="class-title-line" :class="{ 'line-active': vmsAbnorLine }"></div>
            </div>
          </div>
        </div>
        <div style="width: 100%;height: 350px;margin-top: 8px;" id="vmNum"></div>
      </div>

      <!-- 工程列表 -->
      <project-list ref="projectRef" @setSceneUpdate="updataSceneList"></project-list>

      <!-- 场景列表， 相关功能又快速构建代替，不再展示 -->
      <!-- <scene-list ref="sceneRef" @setProjectUpdate="updataProjectList"></scene-list> -->
    </Col>
    <Col span="6" style="padding-right: 30px;position: relative;">
      <!-- 头像信息 -->
      <div class="home-right-baseinfo" style="background-color: #fff;">
        <div class="avatar-name-wrap">
          <!-- <Avatar icon="ios-person" size="large" :src="setAvater" /> -->
          <img :src="setAvater" style="width:80px;height:80px;border-radius: 50%;margin: 0 auto;" v-imgerror="defaultImg" />
          <p
            style="color: #fff;font-size: 16px;font-weight: bold;margin-top: 8px;text-align: center;"
          >
            {{ nickName }}
          </p>
        </div>
        <div class="notice-style">
          <Poptip
            placement="bottom"
            width="400"
            style="line-height: initial;"
            id="boardPoptip"
            v-model="visiblePop"
          >
            <span style="margin:0 30px;">
              <Badge :count="notReadCount" style="line-height: initial;">
                <Icon
                  style="cursor: pointer"
                  type="ios-notifications-outline"
                  :size="30"
                  color="#fff"
                />
              </Badge>
            </span>
            <div class="api" slot="content">
              <boardlist
                type="list"
                @hidePop="hidePop"
                @showPop="showPop"
                v-if="showNotice"
              ></boardlist>
            </div>
          </Poptip>
        </div>
        <div class="signout-wrap">
          <Poptip transfer confirm title="确定要退出此用户吗？" placement="left" @on-ok="Signout">
            <img src="../../assets/home/signout.png" style="vertical-align: middle;" alt="退出" />
            退出
          </Poptip>
        </div>
      </div>
      <!-- 工程模板 -->
      <div style="background-color: #fff;min-height: 300px;padding-bottom: 30px;">
        <div style="display: flex;justify-content: space-between;padding: 0 17px;">
          <div style="font-size: 18px;font-weight: 600;line-height: 32px">
            工程模板列表(共：{{ templateTotal }})
          </div>
        </div>
        <div style="display: flex;justify-content: space-between;padding: 0 17px;margin-top: 14px;">
          <Button ghost size="small" type="primary" @click="visible = true">
            <Icon type="md-add" size="large" />
          </Button>
          <Select filterable
            @on-change="searchItem"
            v-model="rangeId"
            style="min-width:120px;margin-left:5px;width:150px"
            placeholder="所属靶场"
            clearable
            v-if="distributedRange && $store.state.common.showDistributed"
          >
            <Option
              v-for="(items, index) in rangeAllList"
              :value="items.id"
              :key="index + 'range'"
              >{{ items.name }}</Option
            >
          </Select>
          <i-select
            clearable
            placeholder="可见范围"
            v-model="selectProTemModel"
            style="width: 150px;margin-left:5px;"
            @on-change="changeTemplate"
          >
            <i-option value="range">平台</i-option>
            <i-option value="system">系统</i-option>
            <i-option value="company">单位</i-option><i-option value="person">个人</i-option>
          </i-select>
          <Input
            v-model.trim="searchTemNameInput"
            placeholder="模板名称"
            clearable
            @on-change="searchTemNameBtn"
            style="width: 180px;margin-left:5px;"
          />
          <Button
            class="header-btn"
            type="primary"
            ghost
            style="height: 32px;margin-left:5px;"
            @click="refreshTem()"
            ><i class="el-icon-refresh-right"
          /></Button>
        </div>
        <div class="project-wrap" v-show="showProjectList" :style="{ maxHeight: setProHei }">
          <div v-for="(item, key) in templateList" :key="key">
            <div class="tem-item">
              <div class="tem-item-info">
                <img
                  class="exper-img"
                  :src="item.picUrl ? '/files' + item.picUrl : defImgSrc"
                  :onerror="defaultImg1"
                  @click="showBigImg(item.picUrl)"
                />
                <div class="tem-item-text-info">
                  <div class="template-name" :title="item.name">{{ item.name }}</div>
                  <div style="font-weight: bold;color: #adadad;">
                    <p class="tem-creat-text">创建者</p>
                    <span>：</span>
                    <span>{{ item.creatorName }}</span>
                  </div>
                  <div style="font-weight: bold;color: #adadad;">
                    <p class="tem-creat-text">可见范围</p>
                    <span>：</span>
                    <span>{{ switchScope(item.visibility) }}</span>
                    <!--14版本没有基础模板这个概念了-->
                    <!--<span v-if="item.marktype =='base'">（基础模板）</span>-->
                  </div>
                  <div style="font-weight: bold;color: #adadad;">
                    <p class="tem-creat-text">创建时间</p>
                    <span>：</span>
                    <span>{{ item.created }}</span>
                  </div>
                  <div
                    style="margin-right:8px;font-weight: bold;color: #adadad;"
                    v-if="distributed"
                  >
                    <p class="tem-creat-text">上报状态</p>
                    <span>：</span>
                    <Tooltip
                      :disabled="!['0', '1'].includes(item.reportedStatus)"
                      :content="item.reportedMsg"
                      placement="top"
                      max-width="600"
                      transfer-class-name="forTooltip"
                      transfer
                    >
                      <span
                        class="target-status-text"
                        :style="{
                          color: ['0', '1'].includes(item.reportedStatus)
                            ? '#ed4014'
                            : item.reportedStatus === '2'
                            ? '#19be6b'
                            : '#adadad'
                        }"
                      >
                        {{
                          ['0', '1'].includes(item.reportedStatus)
                            ? '上报失败'
                            : item.reportedStatus === '2'
                            ? '上报成功'
                            : '未上报'
                        }}</span
                      >
                    </Tooltip>
                  </div>
                </div>
              </div>
              <div>
                <Poptip placement="left-start" trigger="click" v-model="item.poptipshow">
                  <div
                    style="display: flex;justify-content: flex-start;cursor: pointer;height: 24px;align-items: center;margin-left: 10px"
                  >
                    <div class="three-point"></div>
                    <div class="three-point middle-point"></div>
                    <div class="three-point"></div>
                  </div>
                  <div slot="content" class="pop-content-list">
                    <Button
                      class="jump-btn"
                      :disabled="setBtnStatus(item)"
                      @click="modifyProtem(item, key)"
                      type="text"
                      >修改</Button
                    >
                    <br />
                    <Poptip
                      confirm
                      title="确定要删除吗?"
                      @on-ok="delProtem(item, key)"
                      ok-text="确定"
                      cancel-text="取消"
                      :style="setIsClick(item)"
                    >
                      <Button class="jump-btn" :disabled="setBtnStatus(item)" type="text"
                        >删除</Button
                      >
                    </Poptip>
                    <br />
                    <div
                      style="cursor: pointer"
                      class="jump-btn"
                      @click="exportTemplate(item, key)"
                    >
                      导出
                    </div>
                    <div
                      style="cursor: pointer"
                      class="jump-btn"
                      @click="reportedTemplate(item)"
                      v-if="distributed"
                    >
                      上报
                    </div>
                    <div style="cursor: pointer" class="jump-btn" @click="creatProByTem(item, key)">
                      创建工程
                    </div>
                  </div>
                </Poptip>
              </div>
            </div>
            <Divider dashed />
          </div>
        </div>
        <div style="display: flex;justify-content: center;" v-show="showProjectList">
          <Page
            :total="templateTotal"
            size="small"
            :page-size="templatePageSize"
            :current="templatePage"
            @on-change="temOnChange"
            show-elevator
          />
        </div>
        <div v-show="showDefImg1" class="defGraphWrap">
          <div class="defGraph"></div>
          <div class="graphText">暂无信息</div>
        </div>
      </div>
    </Col>
    <Modal v-model="bigModal" :footer-hide="true" width="1000">
      <div class="modal-img-wrap">
        <img :src="setTemplateImgSrc" alt="template" style="width:100%;" :onerror="defaultImg1" />
      </div>
    </Modal>
    <Drawer
      style="z-index:2000"
      :closable="true"
      :mask-closable="false"
      width="650"
      v-model="retemplateModel"
      class="deviceDrawer"
      :on-visible-change="changeModalStatus"
    >
      <div
        style="position: absolute;top: 70px;left: -17px;cursor: pointer"
        @click="closeDistribution"
      >
        <img src="../../assets/globalIcon/closeIcon.png" alt="Close" />
      </div>
      <div style="display: flex;justify-content: flex-start;align-items: center">
        <div style="height: 8px;width: 8px;border-radius: 50%;background-color: #333"></div>
        <div style="margin-left: 5px;font-size: 18px;font-weight: 700">修改模板</div>
      </div>
      <div>
        <Form
          ref="reTemFormValidate"
          :model="reTemFormValidate"
          :rules="reTemRuleValidate"
          :label-width="120"
        >
          <FormItem label="名称：" prop="name">
            <Input
              v-model.trim="reTemFormValidate.name"
              placeholder="最大长度为64个字符"
              :maxlength="64"
            ></Input>
          </FormItem>
          <FormItem label="可见范围：" prop="visibility">
            <RadioGroup v-model="reTemFormValidate.visibility">
              <Radio label="share">分享</Radio>
              <Radio label="private">个人</Radio>
            </RadioGroup>
          </FormItem>
          <FormItem label="描述：" prop="description">
            <Input
              v-model.trim="reTemFormValidate.description"
              type="textarea"
              :maxlength="200"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="最大长度为200个字符"
            ></Input>
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              @click="submitTemplateInfo('reTemFormValidate')"
              :loading="templateLoading"
              >确定</Button
            >
            <Button @click="canleTemplateModal('reTemFormValidate')">重置</Button>
          </FormItem>
        </Form>
      </div>
    </Drawer>

    <!-- 创建工程 -->
    <Modal
      v-model="createProModal"
      width="600"
      :mask-closable="false"
      :footer-hide="true"
      title="创建工程"
    >
      <creat-pro
        v-if="createProModal"
        :pro-id="this.sendTemObj.id"
        :pro-name="this.sendTemObj.name"
        @creatProModalStatus="conModalChange"
      ></creat-pro>
    </Modal>

    <!-- 导入模板 -->
    <Modal
      v-model="visible"
      title="添加工程模板"
      width="400"
      :loading="loadingStatus"
      :mask-closable="false"
      class-name="vertical-center-modal"
      okText="确定"
      cancelText="取消"
      @on-ok="submitTem('formV')"
      @on-cancel="handleReset('formV')"
      class="modal"
    >
      <Form ref="formV" :model="formV" :rules="ruleV" :label-width="80" class="add-form">
        <FormItem label="名称：" prop="name">
          <i-Input v-model="formV.name" :maxlength="64" placeholder="最大长度为64个字符"></i-Input>
        </FormItem>
        <FormItem label="可见范围：" prop="visibility">
          <RadioGroup v-model="formV.visibility">
            <Radio label="share">单位</Radio>
            <Radio label="private">个人</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="文件：" prop="file">
          <Upload
            v-model="formV.file"
            :format="['json', 'JSON']"
            action="/api/virtual/template/add"
            :before-upload="handleUpload"
            style="display:inline-block;"
          >
            <Button icon="ios-cloud-upload-outline">上传</Button>
          </Upload>
          <WarningTip content="请上传json格式文件"></WarningTip>
          <div class="fileStyle" v-if="formV.file !== null">文件名称: {{ formV.file.name }}</div>
        </FormItem>
        <FormItem label="描述：">
          <i-Input
            type="textarea"
            :maxlength="200"
            v-model="formV.desc"
            placeholder="最大长度为200个字符"
          ></i-Input>
        </FormItem>
      </Form>
    </Modal>
  </Row>
</template>
<script>
function toDecimal(a, b) {
  let num1 = a / b;
  if (num1 < 1) {
    num1 = num1 * 100;
    num1 = num1.toString();
    let index = num1.indexOf('.');
    let result = num1.slice(0, index + 3);
    return Number(result);
  } else {
    return num1 * 100;
  }
}
function toDecimal2(a, b) {
  let num1 = a / b;
  if (num1 < 1) {
    num1 = num1 * 100;
    num1 = num1.toString();
    let index = num1.indexOf('.');
    let result = num1.slice(0, index + 4);
    return Number(result);
  } else {
    return num1 * 100;
  }
}
import $ from 'jquery';
import * as utils from '@/libs/utils.js';
import cookieUse from '@/libs/cookie.js';
import G2 from '@antv/g2';
import encryption from '@/libs/encryption.js';
import { getTemplateData, modifyTemplate, delTemplate, importTemp } from '@/api/proTemplate.js';
import { getProData, getVmsData, getProResource, inPutTemFile } from '@/api/homer.js';
import { reportedTemplate, getRangeAll } from '@/api/reported-data';
import { baseInfo, logout } from '@/api/login.js';

//  import boards from "@/components/board-cast/boardCast"
import boardlist from '@/view/boardcast/boardcast';
// import ChatRoom from '@/components/chatRoom/chatRoom'
import { mapGetters, mapActions, mapState } from 'vuex';
// 引入组件
import projectList from '@/components/project/project';
// import sceneList from "@/components/sceneProject/sceneProject" // 相关功能又快速构建代替，不再展示
import creatPro from '@/components/creatPage/creatProject';
import resourcesReportedMixin from '@/mixin/resources-reported-mixin';
import { validateName128 ,validateNameCustom} from '@/libs/reg';
	import Img from '@/assets/baseInfo/defult.jpg'
export default {
  components: {
    boardlist,
    projectList,
    // sceneList, //相关功能又快速构建代替，不再展示
    creatPro
  }, //boards
  mixins: [resourcesReportedMixin],
  name:'homer',
  data() {
    const validateName = (rule, value, callback) => {
      var myReg = /[~!！@#$%^&*()\|,<>?"'“‘();:+={}]/;
      value = value.replace(/\s*/g, '');
      if (!value) {
        callback('请填写名字');
      } else {
        // if (myReg.test(value)) {
        //   callback('名字不能包含特殊字符');
        // } else {
        //   callback();
        // }
        // validateName64(rule, value, callback)
        validateNameCustom(rule, value, callback,64)
      }
    };
    return {
      defaultImg:Img,
      distributed: false,
      rangeAllList: [],
      Omit_the_figure: false,
      Omit_the_figures: false,
      // 页面设置
      fullHeight: document.documentElement.clientHeight,
      setPageHei: '100%',
      middleContHei: 'auto',
      setProHei: 'auto',
      // 个人信息
      USER_ID: '',
      isRootDesigner: false,
      getToken: '',
      setAvater: '',
      nickName: '',
      // 缺省图
      showDefImg1: false,
      showDefImg2: true,
      // 工程饼状图
      proTotal: 0,
      proPerList: [],
      setColorArr: [
        '56 , 56, 211',
        '46, 208, 150',
        '233, 142, 21',
        '0, 192, 255',
        '255, 81, 81',
        '255, 132, 222',
        '109, 155, 255',
        '72, 209, 204',
        '205, 92, 92'
      ],
      // 虚拟机图
      sendVmsParams: 'total',
      sendProSourceParams1: 'CPU',
      // 虚拟机排序
      vmsTotalText: true,
      vmsTotalLine: true,
      vmsNorText: false,
      vmsNorLine: false,
      vmsAbnorText: false,
      vmsAbnorLine: false,
      // 资源排序
      cpuText: true,
      cpuLine: true,
      memText: false,
      memLine: false,
      diskText: false,
      diskLine: false,
      netText: false,
      netLine: false,
      // 公告
      visiblePop: false,
      showNotice: true,
      // 模板列表
      showProjectList: false,
      templatePage: 1,
      templatePageSize: 9,
      templateTotal: 0,
      templateList: [],
      searchTemplateName: '',
      isDisableBtn: false,
      searchTemNameInput: '',
      selectProTemModel: 'designer',
      rangeId: '',
      templateVisibility: '',
      bigModal: false,
      setTemplateImgSrc: '',
      defImgSrc: require('../../assets/home/defImg.png'),
      defaultImg1: 'this.src="' + require('../../assets/home/defImg.png') + '"',
      // 修改
      retemplateModel: false,
      templateLoading: false,
      reTemFormValidate: {
        name: '',
        visibility: '',
        description: ''
      },
      reTemRuleValidate: {
        name: [{ required: true, validator: validateName, trigger: 'change' }],
        visibility: [{ required: true, message: '请选择可见范围', trigger: 'change' }]
      },
      reTemplateId: '',
      // 创建工程
      createProModal: false,
      sendTemObj: {},
      poptipshow: false,

      //模板部分
      loadingStatus: true,
      visible: false,
      formV: {
        name: '',
        type: 'project',
        visibility: 'share',
        file: null,
        detail: '',
        desc: ''
      },
      ruleV: {
        name: [{ required: true, validator: validateName, trigger: 'change' }],
        visibility: [{ required: true, message: '请选择可见范围' }],
        file: [{ required: true, message: '请上传文件' }]
      }
    };
  },
  computed: {
    ...mapState('board', ['notReadCount']), //未读消息数
    distributedRange() {
      return this.$store.state.user.distributedRange;
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
  watch: {
    $route(to, from) {
      if (to.path == '/bulletin') {
        this.fetchData(to.name);
      }
    }
  },
  mounted() {
    this.setStyle();
    window.onresize = () => {
      this.setStyle();
    };
    $('.avatar-name-wrap .ivu-avatar-large').css({
      height: '80px',
      width: '80px',
      'border-radius': '50%'
    });
    // 绘图
    this.chart2();
    this.chart3();
    // 工程模板列表
    this.getProtemList();
    // 工程列表
    this.getProStates(); // 工程统计 饼状图
    this.getVms(); // 虚拟机排序
    this.getProResource1(); // 工程资源排序
    this.queryAllRange(); //查询靶场信息
  },
  created() {
    // 获取用户id
    setTimeout(() => {
      //如果不使用定时器会低概率出现第一次无法获取到November的问题
      let November = sessionStorage.getItem('November');
      November = JSON.parse(encryption.SelfUseDecrypt(November));
      this.USER_ID = November.userId;
      this.isRootDesigner = November.isRootDesigner;
      this.setAvater = November.avatar;
      this.nickName = November.nickname;
      this.distributed = November.distributed;
      this.getToken = cookieUse.getCookie('desig-token');
    }, 800);
  },
  methods: {
    // 设置样式
    setStyle() {
      window.fullHeight = document.documentElement.clientHeight;
      this.fullHeight = window.fullHeight;
      let height = $('.middle-content-wrap').css('height');
      height = parseFloat(height);
      if (this.fullHeight > height) {
        // this.middleContHei = this.fullHeight +'px'
      } else {
        // this.setPageHei = '100%'
        // this.middleContHei = 'auto'
      }
      // this.setProHei = height - 192 + 'px'
    },
    // 退出登录
    Signout() {
      logout()
        .then((res) => {
          if (res.data.code === 1) {
            cookieUse.setCookie('desig-token', '', 0);
            cookieUse.setCookie('Authorization', '', 0);
            sessionStorage.removeItem('November');
            // this.$router.push({
            //   path: '/login'
            // });
            window.openLogin(this.$router)
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 2
            });
          }
        })
        .catch((err) => {
          this.$Message.error('服务器连接失败！');
        });
    },
    // 图表溢出resize
    overflowResize() {
      const e = document.createEvent('Event');
      e.initEvent('resize', true, true);
      window.dispatchEvent(e);
    },
    // 获取工程统计
    getProStates() {
      getProData()
        .then((res) => {
          if (res.data.code === 1) {
            let getData = res.data.data;
            let dataList = getData.list;
            let total = getData.total;
            this.proTotal = getData.total;
            if (total > 0) {
              this.showDefImg2 = true;
            } else {
              this.showDefImg2 = false;
            }
            dataList = dataList.sort(function(x, y) {
              return y.count - x.count;
            });
            for (let i = 0; i < dataList.length; i++) {
              dataList[i].color = this.setColorArr[i] ? this.setColorArr[i] : this.setColorArr[3];
              dataList[i].statusName = dataList[i].statusCHName;
              dataList[i].pre = toDecimal2(dataList[i]['count'], total);
            }
            this.proPerList = dataList;
          }
        })
        .catch((err) => {});
    },
    setOutLineColor(color) {
      return `rgb(${color})`;
    },
    setInLineColor(color) {
      return `rgba(${color},0.38)`;
    },
    // 虚拟机数量排序
    chart2() {
      let data = [];
      this.chart = new G2.Chart({
        container: 'vmNum',
        forceFit: true,
        height: 350,
        // padding:[ 20, 20, 60, 'auto' ]
        padding: 'auto',
        animate: { Boolean } //图表动画开关，默认为 true，即开启动画。
      });
      this.chart.source(data);
      this.chart.scale('val', {
        alias: '值'
      });
      this.chart.tooltip({
        showCrosshairs: true,
        shared: false
      });
      this.chart.scale({
        name: {
          range: [0, 1]
        }
      });
      this.chart.axis('val', {
        label: {
          formatter: (val) => {
            return val + '(个)';
          }
        }
      });
      const MAX_CHARACTERS = 8; // 最多可展示的字符数，超出需要截取
      this.chart.axis('name', {
        label: {
          textStyle: {
            fill: '#404040', // 文本的颜色
            fontSize: '12', // 文本大小
            textAlign: 'end'
          },
          autoRotate: false,
          formatter(text) {
            return text.length <= MAX_CHARACTERS ? text : `${text.slice(0, MAX_CHARACTERS)}...`;
          },
          rotate: -15
        }
      });
      this.chart
        .area()
        .position('name*val')
        .color('rgb(229, 223, 245)');
      this.chart
        .line()
        .position('name*val')
        .color('#1563C2 ');
      this.chart
        .point()
        .position('name*val')
        .color('#1563C2 ');
      this.chart.render();
      this.overflowResize();
    },
    getVms() {
      getVmsData(this.sendVmsParams)
        .then((res) => {
          if (res.data.code === 1) {
            let nameList = [];
            let resultData = res.data.data;
            let arr = [];
            let getData = [];
            if (resultData.length > 10) {
              getData = resultData.slice(0, 10);
            } else {
              getData = resultData;
            }
            for (let i = 0; i < getData.length; i++) {
              let name = getData[i].name;
              if (nameList.includes(name)) {
                name += `-${getData[i]['cloudName']}`;
              }
              nameList.push(name);
              let val = getData[i].count;
              let obj = {
                name,
                val
              };
              arr.push(obj);
            }
            this.chart.changeData(arr);
          } else {
            this.Omit_the_figures = true;
          }
        })
        .catch((err) => {});
    },
    clickVmsTitle(val) {
      if (val === 'total' && this.sendVmsParams != 'total') {
        this.vmsTotalText = true;
        this.vmsTotalLine = true;
        this.vmsNorText = false;
        this.vmsNorLine = false;
        this.vmsAbnorText = false;
        this.vmsAbnorLine = false;
        this.sendVmsParams = val;
        this.getVms();
      } else if (val === 'success' && this.sendVmsParams != 'success') {
        this.vmsTotalText = false;
        this.vmsTotalLine = false;
        this.vmsNorText = true;
        this.vmsNorLine = true;
        this.vmsAbnorText = false;
        this.vmsAbnorLine = false;
        this.sendVmsParams = val;
        this.getVms();
      } else if (val === 'failure' && this.sendVmsParams != 'failure') {
        this.vmsTotalText = false;
        this.vmsTotalLine = false;
        this.vmsNorText = false;
        this.vmsNorLine = false;
        this.vmsAbnorText = true;
        this.vmsAbnorLine = true;
        this.sendVmsParams = val;
        this.getVms();
      }
    },
    // 工程资源排序
    clickResourceTitle(val) {
      if (val === 'CPU' && this.sendProSourceParams1 != 'CPU') {
        this.cpuText = true;
        this.cpuLine = true;
        this.memText = false;
        this.memLine = false;
        this.diskText = false;
        this.diskLine = false;
        this.netText = false;
        this.netLine = false;
        this.sendProSourceParams1 = val;
        this.getProResource1();
      } else if (val === 'MEM' && this.sendProSourceParams1 != 'MEM') {
        this.cpuText = false;
        this.cpuLine = false;
        this.memText = true;
        this.memLine = true;
        this.diskText = false;
        this.diskLine = false;
        this.netText = false;
        this.netLine = false;
        this.sendProSourceParams1 = val;
        this.getProResource1();
      } else if (val === 'DISK' && this.sendProSourceParams1 != 'DISK') {
        this.cpuText = false;
        this.cpuLine = false;
        this.memText = false;
        this.memLine = false;
        this.diskText = true;
        this.diskLine = true;
        this.netText = false;
        this.netLine = false;
        this.sendProSourceParams1 = val;
        this.getProResource1();
      } else if (val === 'NW' && this.sendProSourceParams1 != 'NW') {
        this.cpuText = false;
        this.cpuLine = false;
        this.memText = false;
        this.memLine = false;
        this.diskText = false;
        this.diskLine = false;
        this.netText = true;
        this.netLine = true;
        this.sendProSourceParams1 = val;
        this.getProResource1();
      }
    },
    chart3() {
      let data = [];
      this.chart2G2 = new G2.Chart({
        container: 'fourResource',
        forceFit: true,
        height: 369,
        padding: 'auto'
      });
      this.chart2G2.source(data);
      this.chart2G2.scale('val', {
        alias: '值'
      });
      const MAX_CHARACTERS = 5; // 最多可展示的字符数，超出需要截取
      this.chart2G2.axis('name', {
        label: {
          textStyle: {
            fill: '#404040', // 文本的颜色
            fontSize: '12', // 文本大小
            textAlign: 'end'
          },
          autoRotate: false,
          formatter(text) {
            return text.length <= MAX_CHARACTERS ? text : `${text.slice(0, MAX_CHARACTERS)}...`;
          },
          rotate: -15
        }
      });
      this.chart2G2
        .interval()
        .position('name*val')
        .color('rgb(47, 112, 255)');
      this.chart2G2.render();
      this.overflowResize();
    },
    getProResource1() {
      getProResource(this.sendProSourceParams1)
        .then((res) => {
          if (res.data.code === 1) {
            let resultData = res.data.data;
            let arr = [];
            let getData = [];
            let nameList = [];
            if (resultData.length > 10) {
              getData = resultData.slice(0, 10);
            } else {
              getData = resultData;
            }
            for (let i = 0; i < getData.length; i++) {
              let name = getData[i].name;
              if (nameList.includes(name)) {
                name += `-${getData[i]['cloud_name']}`;
              }
              nameList.push(name);
              let val = getData[i].count;
              let obj = {
                name,
                val
              };
              arr.push(obj);
            }
            let text = '';
            if (this.sendProSourceParams1 === 'CPU') {
              text = '(Core)';
            } else if (this.sendProSourceParams1 === 'MEM') {
              text = '(MB)';
            } else if (this.sendProSourceParams1 === 'DISK') {
              text = '(GB)';
            } else if (this.sendProSourceParams1 === 'NW') {
              text = '(个)';
            }
            this.chart2G2.axis('val', {
              label: {
                formatter: (val) => {
                  return val + text;
                }
              }
            });
            this.chart2G2.changeData(arr);
          } else {
            this.Omit_the_figure = true;
          }
        })
        .catch((err) => {});
    },
    // 公告
    hidePop() {
      this.visiblePop = false;
    },
    showPop() {
      this.visiblePop = true;
    },
    // 工程模板列表
    getProtemList() {
      let query = {
        pageIndex: this.templatePage,
        pageSize: this.templatePageSize
      };
      let params = {
        name: this.searchTemplateName,
        visibility: this.templateVisibility,
        type: 'project',
        rangeId: this.rangeId
      };
      getTemplateData(params, query)
        .then(async (res) => {
          if (res.data.code === 1) {
            let pateInfo = res.data.data;
            let items = pateInfo.items;
            await this.getReportedStatus_mixins(items).then();
            this.templateList = items;
            this.templateTotal = parseInt(pateInfo.total);
            if (this.templateList.length > 0) {
              this.showProjectList = true;
              this.showDefImg1 = false;
            } else {
              this.showProjectList = false;
              this.showDefImg1 = true;
            }
          } else {
            this.templateList = [];
            this.templateTotal = 0;
            this.showProjectList = false;
            this.showDefImg1 = true;
          }
        })
        .catch((err) => {
          this.showProjectList = false;
          this.showDefImg1 = true;
        })
        .finally(() => {
          clearTimeout(this.timer);
          this.timer = setTimeout(() => {
            this.getProtemList();
          }, 10000);
        });
    },
    temOnChange(val) {
      this.templatePage = val;
      this.getProtemList();
    },
    changeTemplate(val) {
      this.templatePage = 1;
      this.templateVisibility = val;
      this.getProtemList();
    },
    searchTemNameBtn(val) {
      this.templatePage = 1;
      this.searchTemplateName = this.searchTemNameInput;
      this.getProtemList();
    },
    refreshTem() {
      this.templatePage = 1;
      this.searchTemplateName = '';
      this.searchTemNameInput = '';
      this.templateVisibility = '';
      this.selectProTemModel = 'designer';
      this.rangeId = '';
      this.getProtemList();
    },
    // 工程模板创建工程
    creatProByTem(item, index) {
      this.$set(this.templateList[index], 'poptipshow', false);
      this.sendTemObj = item;
      this.createProModal = true;
    },
    conModalChange(val) {
      this.createProModal = val;
      this.$refs.projectRef.refreshProject();
    },
    // 大图预览
    showBigImg(src) {
      if (src) {
        this.setTemplateImgSrc = '/files' + src;
        this.bigModal = true;
      } else {
        this.$Message.info({ content: '无缩略图', duration: 3 });
      }
    },
    // 删除模板
    delProtem(item, index) {
      this.$set(this.templateList[index], 'poptipshow', false);
      if (item.visibility === 'public' || (item.creator != this.USER_ID && !this.isRootDesigner)) {
        //                  this.$Message.info({content:'没有权限删除此模板！',duration:3})
        return false;
      }
      delTemplate(item.id)
        .then((res) => {
          if (res.data.code === 1) {
            this.$Message.success({
              content: '删除成功!',
              duration: 3
            });
            this.getProtemList();
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
          }
        })
        .catch((err) => {});
    },
    // 导出工程模板
    exportTemplate(item, index) {
      // let _this = this
      // $.ajax({
      //     type: "POST",
      //     url: `/api/resource-manager/template/file/${item.id}`,
      //     // data: params,
      //     success: function(response, status, request) {
      //         var disp = request.getResponseHeader('Content-Disposition');
      //         if (disp && disp.search('attachment') != -1) {  //判断是否为文件
      //         _this.$set(_this.templateList[index],'poptipshow',false)
      //             var form = $('<form method="POST" action="' + `/api/resource-manager/template/file/${item.id}` + '">');
      //             // $.each(params, function(k, v) {
      //             //     form.append($('<input type="hidden" name="' + k +
      //             //             '" value="' + v + '">'));
      //             // });
      //             $('body').append(form);
      //             form.submit(); //自动提交

      //         }else{
      //              _this.$Message.error({
      //                 content:response.message,
      //                 duration:3,
      //             })

      //         }
      //     }
      // });

      let id = item.id;
      let name = item.name;
      importTemp(id)
        .then((res) => {
          var disp = res.headers['content-disposition'];
          if (disp && disp.search('attachment') != -1) {
            //判断是否为文件
            let projectTopo_json = JSON.stringify(res.data);
            if (typeof navigator !== 'undefined' && navigator.msSaveOrOpenBlob) {
              //兼容ie10
              var blob = new Blob([projectTopo_json], {
                type: 'data:application/json;charset=utf-8'
              });
              navigator.msSaveOrOpenBlob(blob, name + '.json');
            } else {
              const a = document.createElement('a');
              a.style.visibility = 'hidden';
              document.body.appendChild(a);
              var blobs = new Blob([projectTopo_json], {
                type: 'data:application/json;charset=utf-8'
              });
              var objurl = URL.createObjectURL(blobs);
              a.href = objurl;
              a.download = name + '.json';
              a.click();
              document.body.removeChild(a);
            }
          } else {
            this.$Message.error({
              content: res.data.message,
              duration: 3
            });
          }
        })
        .catch((err) => {});
    },
    // 设置按钮
    setBtnStatus(item) {
      if (item.visibility != 'public' && (item.creator == this.USER_ID || this.isRootDesigner)) {
        return false;
      } else {
        return true;
      }
    },
    // 修改模板
    modifyProtem(item, index) {
      this.$set(this.templateList[index], 'poptipshow', false);
      if (item.visibility != 'public' && (item.creator == this.USER_ID || this.isRootDesigner)) {
        this.reTemplateId = item.id;
        this.reTemFormValidate.name = item.name;
        this.reTemFormValidate.visibility = item.visibility;
        this.reTemFormValidate.description = item.description;
        this.retemplateModel = true;
      }
    },
    submitTemplateInfo(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          let params = {
            name: this.reTemFormValidate.name,
            visibility: this.reTemFormValidate.visibility,
            description: this.reTemFormValidate.description
          };
          this.templateLoading = true;
          modifyTemplate(params, this.reTemplateId)
            .then((res) => {
              if (res.data.code === 1) {
                this.$Message.success({
                  content: '修改成功!',
                  duration: 3
                });
                this.retemplateModel = false;
                this.getProtemList();
              } else {
                this.$Message.error({
                  content: res.data.message,
                  duration: 3
                });
              }
              this.templateLoading = false;
            })
            .catch((err) => {
              this.templateLoading = false;
            });
        } else {
          this.$Message.error('请完善信息！');
        }
      });
    },
    canleTemplateModal(name) {
      this.$refs[name].resetFields();
      this.reTemFormValidate.visibility = 'share';
    },
    closeDistribution() {
      this.retemplateModel = false;
    },
    changeModalStatus() {
      this.reTemplateId = '';
      this.reTemFormValidate.name = '';
      this.reTemFormValidate.visibility = '';
      this.reTemFormValidate.description = '';
      this.$refs.reTemFormValidate.resetFields();
    },
    // 触发场景列表更新
    updataSceneList(val) {
      this.$refs.sceneRef.getProjectList();
    },
    // 触发工程列表更新
    updataProjectList(val) {
      this.$refs.projectRef.refreshProject();
    },
    // 可见范围转换为中文
    switchScope(val) {
      if (val === 'share') {
        return '单位';
      } else if (val === 'private') {
        return '个人';
      } else {
        return '系统';
      }
    },
    setIsClick(item) {
      if (item.visibility === 'public' || (item.creator != this.USER_ID && !this.isRootDesigner)) {
        return { 'pointer-events': 'none', color: '#ccc' };
      }
    },

    // 模板部分
    // 提交表单
    submitTem(name) {
      let _this = this;
      this.$refs[name].validate((valid) => {
        if (valid) {
          let params = JSON.stringify({
            description: this.formV.desc,
            fileData: this.formV.detail,
            name: this.formV.name,
            type: 'project',
            visibility: this.formV.visibility
          });
          inPutTemFile(params).then((data) => {
            if (data.data.code === 1) {
              _this.$Message.success({
                content: '操作成功',
                duration: 3
              });
              this.$refs[name].resetFields();
              this.formV.desc = '';
              _this.visible = false;
              _this.getProtemList();
            } else {
              _this.$Message.error({
                content: data.data.message,
                duration: 3
              });
            }
            _this.changeModalLoading();
          });
        } else {
          _this.changeModalLoading();
          this.$Message.error('请完善信息！');
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
      this.formV.desc = '';
    },
    handleUpload(file) {
      let _this = this;
      let nameArr = file.name.split('.');
      let fileType = nameArr[nameArr.length - 1];
      if (fileType !== 'json' && fileType !== 'JSON') {
        _this.$Message.error({
          content: '请选择json文件',
          duration: 5
        });
        return false;
      }
      this.formV.file = file;
      this.$refs.formV.validateField('file');
      const reader = new FileReader();
      reader.readAsText(this.formV.file, 'UTF-8');
      reader.onload = function(evt) {
        let newjson = evt.target.result;
        _this.formV.detail = newjson;
        // this.result为读取到的json字符串，需转成json对象
        // 检测是否导入成功
      };
      let name = file.name;
      let fileName = name.substring(name.lastIndexOf('.') + 1).toLowerCase();
      if (
        fileName !== 'json' &&
        fileName !== 'JSON' &&
        fileName !== 'xml' &&
        fileName !== 'ymal' &&
        fileName !== 'sql'
      ) {
        this.formV.file = null;
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件格式' + file.name + '不正确，请上载.json/.xml/.ymal/.sql文件。'
        });
      }
      return false;
    },
    changeModalLoading() {
      this.loadingStatus = false;
      this.$nextTick(() => {
        this.loadingStatus = true;
      });
    },
    reportedTemplate(item) {
      reportedTemplate([item.id])
        .then((res) => {
          if (res.code == 1) {
            this.$Message.success(res.message);
            this.getProtemList();
            item.poptipshow = false;
          } else {
            this.$Message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查询所有分靶场信息
    queryAllRange() {
      getRangeAll().then((res) => {
        if (res.code === 1) {
          this.rangeAllList = res.data;
        }
      });
    },
    searchItem() {
      this.getProtemList();
    }
  }
};
</script>
<style scoped>
.pd >>> .ivu-card-body {
  padding: 24px 16px 23px 16px;
}
.middle-content-wrap {
  padding: 30px;
}
.fileStyle {
  width: 280px;
  word-break: break-all;
}
.calenImg {
  width: 175px;
  height: 386px;
  background: url('../../assets/home/calendarImg.png') no-repeat center center;
  background-size: 100% 100%;
}
.pop-content {
  text-align: left;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 180px;
}
.pop-content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.pop-content::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(209, 209, 209, 0.6);
}
.pop-content::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(179, 179, 179, 0.1);
}
.taskNameText {
  font-size: 16px;
  cursor: pointer;
  max-width: 135px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  -o-text-overflow: ellipsis;
}
/*日历*/
.calendar-wrap {
  width: 400px;
  box-sizing: border-box;
  height: 435px;
  padding: 15px 0 10px;
  background: url('../../assets/home/middle-wrap.png') no-repeat center center;
  background-size: 100% 100%;
  margin-right: 16px;
}
.calendar-week {
  margin: 0 auto;
  border-radius: 20px;
  background-color: rgb(244, 247, 255);
  display: flex;
  justify-content: flex-start;
}
.week-item {
  width: 14.2857142%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: rgb(47, 112, 255);
}
.calendar-view {
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.calendar-view:after {
  display: block;
  clear: both;
  content: '';
}
.date-li {
  width: 14.2857142%;
  height: 30px;
  cursor: pointer;
  text-align: center;
  margin-top: 20px;
}
.date-view {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}
.opacity-class {
  opacity: 0.5;
}
.todayBg {
  border: 2px solid rgb(47, 112, 255);
}
.handleDay {
  background: rgb(47, 112, 255) !important;
  color: #fff;
}
.date-mouth-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 20px 0;
}
.date-mouth {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0 30px;
}
.hasDataClass {
  background: rgb(47, 112, 255);
  height: 5px;
  width: 5px;
  border-radius: 50%;
  margin: 0 auto;
  margin-top: -8px;
}
.vms-wrap {
  width: 100%;
  background-color: #fff;
  border-radius: 4px;
  padding: 15px;
}
/*统计图   369*/
#proStatistics {
  height: 384px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 15px;
}
#proStatistics::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
#proStatistics::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(209, 209, 209, 0.6);
}
#proStatistics::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(179, 179, 179, 0.1);
}
.move-div {
  white-space: nowrap;
  position: relative;
  transition: left 1s;
  -webkit-transition: left 0.4s;
}
.arrow-left {
  position: absolute;
  top: 25px;
  left: 1px;
  z-index: 10;
  cursor: pointer;
}
.arrow-right {
  position: absolute;
  top: 25px;
  right: 0;
  z-index: 10;
  cursor: pointer;
}
.auto-card {
  width: 194px;
  display: inline-block;
  margin-right: 6px;
}
.card-text-wrap {
  display: flex;
  justify-content: space-between;
}
.card-left {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100px;
}
.card-text-num {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}
.card-text-name {
  font-size: 14px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*底部统计图*/
.slide-btn-wrap {
  width: 180px;
  height: 32px;
  border: 1px solid rgb(235, 235, 237);
  padding: 2px 3px;
  border-radius: 15px;
  position: relative;
  margin: 15px 0;
}
.slide-btn-wrap-2 {
  width: 120px;
  height: 32px;
  border: 1px solid rgb(235, 235, 237);
  padding: 2px 3px;
  border-radius: 15px;
  position: relative;
  margin: 15px 0;
}
.slide-btn-wrap-3 {
  width: 180px;
  height: 32px;
  border: 1px solid rgb(235, 235, 237);
  padding: 2px 3px;
  border-radius: 15px;
  position: relative;
  margin: 15px 0;
}
.btn1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  text-align: center;
  line-height: 30px;
  z-index: 2;
  cursor: pointer;
}
.btn2 {
  position: absolute;
  top: 0;
  left: 60px;
  width: 60px;
  text-align: center;
  line-height: 30px;
  z-index: 2;
  cursor: pointer;
}
.btn3 {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  text-align: center;
  line-height: 30px;
  z-index: 2;
  cursor: pointer;
}
.btn4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 75px;
  text-align: center;
  line-height: 30px;
  z-index: 2;
  cursor: pointer;
}
.btn5 {
  position: absolute;
  top: 0;
  left: 90px;
  width: 82px;
  text-align: center;
  line-height: 30px;
  z-index: 2;
  cursor: pointer;
}
.mask-btn {
  position: absolute;
  left: 3px;
  top: 3px;
  height: 24px;
  width: 58px;
  background-color: rgb(235, 235, 237);
  border-radius: 15px;
  z-index: 1;
  transition: left 0.4s;
  -webkit-transition: left 0.4s;
}
.mask-btn2 {
  position: absolute;
  left: 3px;
  top: 3px;
  height: 24px;
  width: 75px;
  background-color: rgb(235, 235, 237);
  border-radius: 15px;
  z-index: 1;
  transition: left 0.4s;
  -webkit-transition: left 0.4s;
}
/*工程*/
.three-point {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: grey;
}
.middle-point {
  margin: 0 3px;
}
.project-wrap {
  margin-top: 14px;
  /*max-height: 1000px;*/
  overflow-x: hidden;
  overflow-y: auto;
}
.project-wrap::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.project-wrap::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(209, 209, 209, 0.6);
}
.project-wrap::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(179, 179, 179, 0.1);
}
.three-point-pop {
  display: flex;
  justify-content: space-between;
}
.project-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pop-content-list {
  line-height: 2.5;
  text-align: center;
}
.jump-btn {
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
}
.jump-btn:hover,
.jump-btn:focus {
  border: none;
  outline: none;
}
/*缺省图*/
.defGraphWrap {
  width: 157px;
  height: 200px;
  margin: 0 auto;
  margin-top: 20px;
}
.defGraph {
  height: 126px;
  width: 157px;
  background: url('../../assets/globalIcon/defGraph.png') no-repeat center center;
  background-size: 157px 126px;
}
.graphText {
  color: #888;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
}
.preDefGraphWrap {
  width: 157px;
  height: 126px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -72px;
  margin-top: -63px;
}
/* 工程补充样式 */
.refre-btn .ivu-btn {
  padding: 5px 5px;
}
.resource-wrap {
  width: 100%;
  background-color: #fff;
  border-radius: 4px;
}
/* 新样式 */
.home-right-baseinfo {
  width: 100%;
  height: 255px;
  background: url('../../assets/home/home-right-baseinfo.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.avatar-name-wrap {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.signout-wrap {
  position: absolute;
  top: 31px;
  right: 20px;
  color: #fff;
  cursor: pointer;
}
/* 虚拟机排序 */
.class-title-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.class-title {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.class-title-all {
  font-size: 16px;
  cursor: pointer;
  color: var(--default-color-level2);
}
.active {
  color: var(--default-color);
  font-size: 16px;
  font-weight: 600;
}
.class-title-line {
  background-color: #fff;
  height: 3px;
  border-radius: 1px;
  width: 34px;
  margin-top: 2px;
}
.line-active {
  background-color: var(--default-color); ;
}
/* 公告 */
.notice-style {
  position: absolute;
  top: 25px;
  left: 20px;
  /* color: #fff; */
  /* cursor: pointer; */
}
/* 工程状态图 */
.project-status-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.project-text-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.project-text {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: left;
  margin-left: 20px;
}
.text-style {
  font-size: 16px;
  font-weight: bold;
}
.demo-circle-inner {
  font-size: 12px;
}
/* 工程模板 */
.tem-item {
  display: flex;
  justify-content: space-between;
  padding: 0 17px;
  width: 100%;
}
.tem-item-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: calc(100% - 40px);
}
.tem-item-text-info {
  display: flex;
  justify-content: left;
  flex-direction: column;
  line-height: 1.8;
  margin-left: 20px;
  width: calc(100% - 100px);
}
.tem-creat-text {
  display: inline-block;
  width: 60px;
}
.template-name {
  font-size: 18px;
  font-weight: 700;
  color: #1563C2 ;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  width: 100%;
}
.exper-img {
  width: 80px;
  height: 90px;
  cursor: zoom-in;
}
.modal-img-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: auto;
}
.deviceDrawer {
  position: relative;
}
</style>
<style>
.three-point-pop .ivu-poptip-inner {
  background-color: rgb(239, 243, 252);
}
.three-point-pop .ivu-poptip-arrow:after {
  border-bottom-color: rgb(239, 243, 252) !important;
}
.three-point-pop .ivu-poptip-popper {
  min-width: 100px;
}
.three-point-pop .ivu-poptip-arrow::after {
  border-left-color: rgb(239, 243, 252) !important;
}
.creatProStyle .ivu-btn-info {
  background: linear-gradient(to right, rgb(1, 196, 254), rgb(46, 115, 255));
}
.project-status-select .ivu-select-dropdown {
  min-width: 125px;
  max-height: 225px;
}
#boardPoptip .ivu-poptip-body {
  padding: 0px;
}
.project-wrap-card .ivu-card-body {
  padding-right: 3px;
}
.deviceDrawer .ivu-drawer-body {
  overflow: inherit;
}
.changeModalStatus .ivu-drawer-wrap {
  z-index: 1061;
}
.project-wrap .ivu-poptip-confirm .ivu-poptip-body .ivu-icon {
  left: 10px;
}
.add-form .ivu-form-item {
  margin-right: 10px;
}
.modal .ivu-modal-footer {
  padding: 5px 18px;
}
</style>
